<html>
<head>
    <meta charset="utf-8">
    <title>加签流转事宜</title>
    <#include "/pubHeadStyleTree.html">
</head>
<body>
    <div style="position: relative;height: 100%;">
        <div class="ccpui-trees" >
            <p class="isShowTree colorSwitch">
                <span style="float: left;color: #fff">&nbsp;&nbsp;流程分类</span>
                <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
            </p>
            <div style="margin-top: 6px;" >
                <ul class="ccpui-iconTree iconTrees">
                    <li><a class="iconfont iconshuaxin- zTree-refresh" title="刷新"></a></li>
                    <li><a class="iconfont iconwenjianjia1-copy zTree-triangle-d" title="展开"></a></li>
                    <li><a class="iconfont iconfolder1 zTree-triangle-r" title="收起"></a></li>
                    <input type="text" style="width: 50%" class="catZtreeValue">
                </ul>
                <ul id="treeSelectGlobalType" class="ztree ccpui-listZtree"></ul>
            </div>
        </div>
        <div class="ccpui-coreContent" style="position: absolute;top:10px;right:10px;bottom: 0;left: 250px">
            <table id="taskTransToItem" lay-filter="taskTransToItem" ></table>
        </div>
    </div>
    <script type="text/html" id="headerToolsBar">
        <div class="layui-btn-container">
            <a class="layui-btn layui-btn-sm" lay-event="query">
                <i class="layui-icon layui-icon-search"></i>
                <span>查询</span>
            </a>
            <a class="layui-btn layui-btn-sm" lay-event="reset">
                <i class="layui-icon layui-icon-refresh"></i>
                <span>重置</span>
            </a>
        </div>

        <form class="layui-form" action="" lay-filter="searchForm" style="margin-top:10px">
            <div class="table-top-filter bpmTaskExeLable">
                <div class="table-filter-alone">
                    <label class="layui-form-label">请求标题</label>
                    <input type="text" name="Q_subject_SL" id="subject" class="layui-input filter-value"
                           placeholder="请求标题"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">流程名称</label>
                    <input type="text" name="Q_processName_SL" id="processName" class="layui-input filter-value"
                           placeholder="流程名称"/>
                </div>
                <div class="table-filter-alone">
                    <label class="layui-form-label">创建时间</label>
                    <input type="text" name="Q_beginCreatetime_DL" id="beginCreatetime" class="layui-input filter-value"
                           placeholder="开始时间"/>
                    <span style="float:left;margin-left:46px">至</span>
                    <input type="text" name="Q_endCreatetime_DG" id="endCreatetime" class="layui-input filter-value"
                           placeholder="结束时间"
                           style="margin-left:60px"/>
                </div>
            </div>
        </form>
    </script>
    <script type="text/html" id="managerBar">
        <a class="layui-btn layui-btn-xs" lay-event="addUsers">添加流转人</a>
        <a class="layui-btn layui-btn-xs" lay-event="showUsers">查看流转人</a>
    </script>

    <!--加签-->
    <div id="addTransToDiv" style="margin: 10px;display:none;">
        <form class="layui-form" action="">
            <table class="layui-table">
                <tr>
                    <td>添加用户</td>
                    <td>
                        <input type="hidden" id="cmpIds" />
                        <textarea id="cmpNames" readonly="readonly" required lay-verify="required" class="layui-textarea"></textarea>
                        <i class="layui-icon layui-icon-username"><a href="javascript:;" onclick="chooseTransUsers()">选择人员</a></i>
                    </td>
                </tr>
                <tr>
                    <td>会签</td>
                    <td>
                        <span id="transType"></span>
                    </td>
                </tr>
                <tr>
                    <td>流转结束后</td>
                    <td>
                        <span id="action"></span>
                    </td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td>
                        <textarea id="transOpinion" name="transOpinion" required lay-verify="required" maxLength="1000" class="layui-textarea"></textarea>
                    </td>
                </tr>
                <tr>
                    <td>提醒消息方式</td>
                    <td>
                        <!--通知方式-->
                        <div class="layui-input-inline">
                            <#list handlersMap?keys as key>
                            <input type="checkbox" class="layui-input" lay-filter="informType" name="informType" lay-skin="primary" value="${key}" checked="checked"  />
                            <span style="line-height: 44px;">
                                ${handlersMap[key].title }
                            </span>
                            </#list>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>流转操作说明</td>
                    <td>
                        <ul>
                            <li>1、添加用户：选择流转人员，可多选(其中会签状态下必须选多人)。</li>
                            <li>2、会签：选择非会签，则其中一个人审批完成流程就返回或提交；<br/>选择会签，则所选人员全部审批完成流程才返回或提交。</li>
                            <li>3、流转结束后，返回：流转结束后，原来的任务将会回到您的待办事项中；<br/>提交：流转结束后，流转人不需要执行原来的任务，流程就往下执行。</li>
                        </ul>
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <script>
        layui.config({
            base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
        }).use(['index','table', 'layer', 'util', 'commons', 'setter', 'totalFilter', 'common', 'laydate'], function () {
            var table = layui.table;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.$;
            var laydate = layui.laydate;
            var setter = layui.setter;
            var commons = layui.commons;
            var common = layui.common;
            var totalFilter = layui.totalFilter;
            var curUserId = "${curUserId}";
            var tableH = commons.tabHeight();
            var dataPrivacyLevel = 0;

            catZtree();
            loadTable(serverPath.workflowPath + setter.workflowLinkPath + 'bpmProTransTo/list');

            //选择加签流转人
            chooseTransUsers = function(){
                var cmpIds = $("#cmpIds").val();
                var cmpNames = $("#cmpNames").html();
                var userSelectorWin;
                var body;

                layer.open({
                    type: 2,
                    title: '人员选择器',
                    area: ['980px','585px'],
                    btn:["保存","取消","撤销"],
                    resize:false,
                    content:serverPath.systemPath + setter.sysLinkPath+ "dialog/view/sysUserDialog?dataPrivacyLevel=" + dataPrivacyLevel,    // todo 添加密级条件
                    success: function(layero, index){
                        body = layer.getChildFrame('body',index);
                        userSelectorWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        userSelectorWin.layui.userList=[];
                        if(cmpIds!=""){
                            var cmpIdAry = cmpIds.split(',');
                            var cmpNameAry = cmpNames.split(',');
                            for(var i=0;i<cmpIdAry.length;i++){
                                userSelectorWin.layui.userList.push({name:cmpNameAry[i],userId:cmpIdAry[i]});
                            }
                        }
                    },
                    yes: function(index, layero){
                        var cmpIdAry =[];
                        var cmpNameAry =[];
                        var theUserList = body.find("input[name=userList]").val();
                        if(theUserList){
                            layui.each(JSON.parse(theUserList),function(index,item){
                                if(curUserId===item.userId){
                                    layer.msg('流转人员不能包含自己,已过滤！',{icon: 5});
                                    return;
                                }
                                cmpIdAry.push(item.userId);
                                cmpNameAry.push(item.name);
                            });
                            $("#cmpIds").val(cmpIdAry.join(','));
                            $("#cmpNames").html(cmpNameAry.join(','));
                        }else{
                            $("#cmpIds").val('');
                            $("#cmpNames").html('');
                        }
                        layer.close(index);
                    },
                    btn3:function(index, layero){
                        userSelectorWin.cancelData(index);
                        return false //开启该代码可禁止点击该按钮关闭
                    }
                });
            };

            //获取消息类型
            function  getInformTypes(element){
                var informTypes = [];
                element.each(function (index,element) {
                    informTypes.push($(element).val());
                });
                return informTypes.toString();
            }

            function catZtree() {
                $.ajax({
                    url: serverPath.workflowPath + setter.workflowLinkPath+"bpmProTransTo/getFlowType",
                    type: "post",
                    dataType: 'json',
                    async: false,
                    success: function (data) {
                        var zNodes = data.data;
                        var setting = {
                            view: {
                                showLine: false,
                                nameIsHTML: true, //允许name支持html
                                selectedMulti: false
                            },
                            edit: {
                                enable: false,
                                editNameSelectAll: false
                            },
                            data: {
                                simpleData: {
                                    enable: true,
                                    idKey: "typeId",
                                    pIdKey: "parentId"

                                },
                                key: {
                                    name: "typeName"
                                }
                            },

                            callback: {
                                onClick: onClickType,
                            }
                        };
                        $.fn.zTree.init($('#treeSelectGlobalType'), setting, zNodes);
                        component.fuzzySearch('treeSelectGlobalType', '.catZtreeValue', null, true); //初始化模糊搜索方法
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert("暂无数据，请稍后操作！" + XMLHttpRequest.status);
                    }
                });
            }

            //点击流程类型
            function onClickType(event, treeId, treeNode) {
                var selectTypeId = treeNode.typeId;
                var nodePath = treeNode.nodePath;
                var url = serverPath.workflowPath + setter.workflowLinkPath + 'bpmProTransTo/list?typeId=' + selectTypeId + '&nodePath=' + nodePath;
                if (null == treeNode.parentId) {
                    url = serverPath.workflowPath + setter.workflowLinkPath + 'bpmProTransTo/list';
                }
                loadTable(url);
                commons.reflashDate({startName: '#beginCreatetime', endName: '#endCreatetime'});
            }

        //展开
        $(".iconTrees .zTree-triangle-d").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(true);
        });
        //收起
        $(".iconTrees .zTree-triangle-r").click(function () {
            $.fn.zTree.getZTreeObj("treeSelectGlobalType").expandAll(false);
        });
        //刷新
        $(".iconTrees .zTree-refresh").click(function () {
            catZtree();
        });
        function loadTable(url) {
            table.render({
                elem: '#taskTransToItem'
                , cellMinWidth: 80
                , title: '流程实例列表'
                , height: tableH
                ,defaultToolbar: ['filter', 'print']
                , url: url
                , method: 'post'
                , toolbar: '#headerToolsBar'
                , autoSort: false
                , page: true
                , cols: [[
                    {
                        field: 'subject',
                        title: '请求标题',
                        sort: true,
                        align: 'center',
                        event: 'processDetail',
                        minWidth: 330,
                        style: 'color:#1E9FFF;cursor:pointer'
                    }
                    , {field: 'processName', title: '流程名称', sort: true, align: 'center'}
                    , {
                        field: 'createTime', title: '创建时间', sort: true, align: 'center', templet: function (d) {
                            if (d.createTime == undefined) {
                                return "";
                            } else {
                                return util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss");
                            }
                        }
                    }
                    , {title: '管理', toolbar: '#managerBar', width: 200, align: 'center'}
                ]]
                , done: function (res) {
                    //
                    commons.reflashDate({startName: '#beginCreatetime', endName: '#endCreatetime'});
                    //status!=0时，无法被选中
                    var dataArr = res.data;
                    if(dataArr!=null) {
                        for (var i = 0; i < dataArr.length; i++) {
                            if (dataArr[i]["status"] != 0) {
                                $("tr[data-index=" + dataArr[i]['LAY_TABLE_INDEX'] + "] input[type='checkbox']").prop("disabled", true);
                            }
                        }
                    }
                }
            });
            totalFilter.init('taskTransToItem');
        }
        table.on('toolbar(taskTransToItem)', function (obj) {
            switch (obj.event) {
                case 'query':
                    common.tableConditionRender("taskTransToItem", "searchForm", {where: {}}, false);
                    break;
                case 'reset':
                    common.tableConditionRender("taskTransToItem", "searchForm", {where: {}}, true);
                    break;
            }
        });
        //监听行工具事件
        table.on('tool(taskTransToItem)', function (obj) {
            var data = obj.data;
            var taskId = data.taskId;
            var runId = data.runId;
            switch (obj.event) {
                //添加流转人
                case 'addUsers':
                    // 获取密级
                    $.ajax({
                        url: serverPath.workflowPath + setter.workflowLinkPath+"processRun/getPrivacyLevelByRunId",
                        data:{runId: runId},
                        type: "post",
                        dataType: 'json',
                        success: function (data) {
                            dataPrivacyLevel = data;
                        }
                    });

                    var transType= data.transType==1?"非会签":"会签";
                    var action = data.action==1?"返回":"提交";
                    $("#transType").html(transType);
                    $("#action").html(action);
                    var layerIndex = layer.open({
                        type:1,
                        title:"添加流转人",
                        area: ['800px','600px'],
                        content: $('#addTransToDiv'),
                        skin: 'btn-class',
                        btn: ['确定','取消'],
                        btnAlign: 'c',
                        success:function(layero){
                            // var mask = $(".layui-layer-shade");
                            // mask.appenTo(layero.parent());
                            //其中：layero是弹层的DOM对象
                            $(".layui-layer-shade").after(layero);
                        },
                        yes: function(index,layero){
                            layer.confirm('确定发送流转意见？', function(index) {
                                var cmpIds=$("#cmpIds").val();
                                var transOpinion=$("#transOpinion").val();
                                //消息通知
                                var informTypeElement=$("#addTransToDiv table [name='informType']:checked");
                                var informType = getInformTypes(informTypeElement);
                                var params= {
                                    cmpIds:cmpIds,
                                    opinion:transOpinion,
                                    informType:informType,
                                    taskId:taskId};
                                var url=serverPath.workflowPath + setter.workflowLinkPath+"bpmProTransTo/add";
                                $.post(url,params,function(data){
                                    if(commons._filterRecord(data)){
                                        layer.alert(data.msg, function (index) {
                                            layer.close(index);
                                            layer.close(layerIndex);
                                            table.reload('taskTransToItem', {
                                                page: {
                                                    curr: 1
                                                }
                                            });
                                            totalFilter.init('taskTransToItem');
                                        });
                                    }else{
                                        layer.msg(data.msg, {icon:5});
                                    }
                                },'json');
                            });
                        },end: function (index) {
                            $("#cmpIds").val("");
                            $("#cmpNames").html("");
                            $("#transOpinion").html("");
                        }

                        });
                        break;
                    //查看流转人
                    case 'showUsers':
                        layer.open({
                            type: 2,
                            title: "流转人",
                            area: ['800px', '500px'],
                            content: serverPath.workflowPath + setter.workflowLinkPath + 'bpmProTransTo/view/showAssignee?taskId=' + taskId,
                            btn: ['关闭'],
                            skin: 'btn-close',
                            btnAlign: 'c',
                            yes: function(index,layero){
                                layer.close(index);
                            }
                        });
                        break;
                    //请求标题
                    case 'processDetail':
                        layer.open({
                            type: 2,
                            title: "流程明细",
                            area: ['800px', '500px'],
                            content: serverPath.workflowPath  + setter.workflowLinkPath + 'processRun/view/info?runId=' + runId,
                            cancel: function () {
                                isNeedReload = false;
                            },
                            end: function(index){
                                if (isNeedReload) {
                                    table.reload('taskTransToItem', {
                                        page: {
                                            curr: 1
                                        }
                                    });
                                    parent.layer.close(index);
                                    totalFilter.init('taskTransToItem');
                                    return false;
                                }
                            }
                        });
                        break;
                }
            });
            commons.reflashDate({startName: '#beginCreatetime', endName: '#endCreatetime'});
            window.Initialization = function () {
                commons.reflashDate({startName: '#beginCreatetime', endName: '#endCreatetime'});
            };
            common.tableSort("taskTransToItem",{show:window.Initialization});
        })
    </script>
    <style>
        .bpmTaskExeLable .table-filter-alone .layui-form-label{
            width: 142px;
        }
        #cmpNames{
            min-height: 50px;
            width: 85%;
            display: inline-block;
        }
        .btn-close .layui-layer-btn{
            text-align: center;
        }
        .btn-close .layui-layer-btn a{
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #FF5722;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
        .btn-close .layui-layer-btn0{
            background-color: #FF5722;
        }

    </style>

</body>
</html>